<script setup>
import { nextTick, ref } from "vue";
import Form from "@/components/Form/index.vue";
import { ElMessage } from "element-plus";
import {
  queryDepartmentListPage,
  operationDepartment,
  deleteDepartment,
} from "@/api/System";
const tableLoading = ref(false);
const seachTableRef = ref();
const modalRef = ref();
const formRef = ref();
const messageBoxRef = ref();
const modalTitle = ref("新增部门");
const formInline = ref([
  {
    type: "input",
    prop: "departmentName",
    placeholder: "部门名称",
    label: "",
    model: "",
  },
]);
const btnLefts = ref([
  {
    label: "新增部门",
    plain: false,
    type: "primary",
    show: true,
    img: new URL("@/assets/icon/btn-add.png", import.meta.url),
    click: async () => {
      openModal();
    },
  },
]);
const tableConfig = ref([
  {
    prop: "departmentName",
    label: "部门名称",
    width: "240",
  },
  {
    prop: "departmentRemark",
    label: "部门描述",
    // width: "300",
  },
  {
    prop: "userCount",
    label: "部门人数",
    width: "120",
  },
  {
    prop: "lastUpdateTime",
    label: "最新更新",
    width: "180",
  },
  {
    type: "action",
    label: "操作",
    width: 175,
    btns: [
      {
        label: () => "编辑",
        type: "success",
        show: (row) => {
          return true;
        },
        click: async (row) => {
          openModal(row);
        },
      },
      {
        label: () => "删除",
        type: "danger",
        click: async (row) => {
          editForm.value = { id: row.id };
          messageBoxRef.value.open();
        },
      },
    ],
  },
]);

const totalPage = ref(0);
const tableData = ref([]);

const handlerSearch = async (formInline) => {
  tableLoading.value = true;
  try {
    const { records, total } = await queryDepartmentListPage(formInline);
    totalPage.value = Number(total);
    tableData.value = records;
    tableLoading.value = false;
  } catch (e) {
    tableLoading.value = false;
  }
};
const formList = ref([
  {
    type: "input",
    key: "departmentName",
    label: "部门名称",
    width: "260px",
    clearable: true,
    maxlength: "50",
  },
  {
    type: "textarea",
    key: "departmentRemark",
    label: "备注",
    width: "260px",
    minRows: 4,
    clearable: true,
    maxlength: 100,
  },
]);
const formRules = {
  departmentName: [
    { required: true, message: "请输入部门姓名", trigger: "change" },
  ],
};
const editForm = ref();

const closeModal = () => {
  modalRef.value.close();
};
const openModal = (data = void 0) => {
  editForm.value = void 0;
  modalRef.value.open();
  if (data) {
    getFormDetail(data);
  } else {
    modalTitle.value = "新增部门";
  }
};

const getFormDetail = (data) => {
  modalTitle.value = "编辑部门";
  editForm.value = data;
  nextTick(() => {
    formRef.value.setForm({
      departmentName: data.departmentName,
      departmentRemark: data.departmentRemark,
    });
  });
};
const modalLoading = ref(false);
const submitModal = async () => {
  modalLoading.value = true;
  const { state, data } = await formRef.value.submitForm();
  if (state) {
    let obj = {
      ...data,
    };
    if (editForm.value) {
      obj = {
        ...data,
        id: editForm.value.id,
        parentId: editForm.value.parentId,
      };
    }
    await operationDepartment(obj);
    closeModal();
    seachTableRef.value.handlerSearch();
  } else {
    const messages = Object.values(data)[0];
    ElMessage({
      showClose: true,
      message: messages[0].message,
      type: "error",
    });
  }
  modalLoading.value = false;
};

const messageConfirm = async () => {
  await deleteDepartment(editForm.value.id);
  ElMessage({
    showClose: true,
    message: "删除成功",
    type: "success",
  });
  seachTableRef.value.handlerSearch();
};

</script>

<template>
  <div class="page-content">
    <SeachTable
      :tableType="1"
      ref="seachTableRef"
      :forms="formInline"
      :btnLefts="btnLefts"
      :tableLoading="tableLoading"
      :tableConfig="tableConfig"
      :tableData="tableData"
      :totalPage="totalPage"
      tableHeight="calc(100% - 202px)"
      @handlerSearch="handlerSearch"
    >
    </SeachTable>
  </div>
  <Modal ref="modalRef" :title="modalTitle" :top="'35vh'" :width="'400px'">
    <template #content>
      <Form
        class="mt14"
        ref="formRef"
        :formList="formList"
        :formRules="formRules"
        labelWidth="80px"
      ></Form>
    </template>
    <template #footer>
      <div>
        <el-button @click="closeModal">取消</el-button>
        <el-button type="primary" @click="submitModal" :loading="modalLoading"
          >确定</el-button
        >
      </div>
    </template>
  </Modal>
  <MessageBox
    ref="messageBoxRef"
    :content="'确定删除该部门？'"
    :rightBtnTxt="'删除'"
    @confirm="messageConfirm"
  />
</template>

<style lang="less" scoped></style>
